<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AppleGanme</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			#biggest {
				margin: 0 auto;
				background: url(img/背景.png);
				width: 800px;
				height: 600px;
				border: 5px solid brown;
			}
			
			.top {
				height: 460px;
				position: relative;
				overflow: hidden;
			}
			
			.top div,
			.pg01 {
				background: url(img/苹果.png);
				position: absolute;
				width: 63px;
				height: 71px;
				text-align: center;
				line-height: 71px;
				font-size: 30px;
				color: white;
				font-family: "微软雅黑";
				font-weight: bold;
			}
			
			.bottom {
				height: 40px;
			}
			
			.first_th {
				width: 250px;
				height: 100%;
			}
			
			.first_th button {
				width: 45px;
				height: 45px;
				border: 0;
				background-color: rgba(0, 0, 0, 0);
				border-radius: 50%;
				position: relative;
				cursor: pointer;
				outline: none;
			}
			
			.first_th .btbegin {
				left: 177px;
				top: 21px;
			}
			
			.first_th .btzanting {
				left: 40px;
				top: 5px;
			}
			
			.first_th .btstop {
				left: 30px;
				bottom: 30px;
			}
			
			.first_th .btshezhi {
				right: 32px;
				top: 40px;
			}
			
			.second_th {
				width: 310px;
				text-align: left;
				padding-left: 60px;
				font-size: 30px;
			}
			
			.second_th span {
				color: white;
			}
			
			.last_th {
				background: url(img/篮子.png);
				padding-top: 32px;
				padding-left: 20px;
				width: 160px;
				height: 98px;
			}
			
			.last_th img {
				display: ;
				float: left;
			}
		</style>
	</head>

	<body>
		<div id="biggest">
			<div class="top">
				<div class="pg01" style="top: 0px;left: 50px;display: none;sudu：1;">A</div>
				<div class="pg01" style="top: 0px;left: 550px;display: none;sudu：1;">V</div>
				<div class="pg01" style="top: 0px;left: 400px;display: none;sudu：1;">C</div>
				<div class="pg01" style="top: 0px;left: 120px;display: none;sudu：1;">K</div>
				<div class="pg01" style="top: 0px;left: 350px;display: none;sudu：1;">M</div>
			</div>
			<table border="0" cellspacing="0" cellpadding="0" class="bottom">
				<tr>
					<th class="first_th">
						<button class="btbegin" id="btbegin"> </button>
						<button class="btzanting"></button>
						<button class="btstop"></button>
						<button class="btshezhi"></button>
					</th>
					<th class="second_th">
						<p>正确率： <span>100%</span></p>
						<p>时间： <span>100%</span></p>
						<p>正确率： <span>100%</span></p>
					</th>
					<th>
						<div class="last_th">
							<img src="img/苹果2.png" />
							<img src="img/苹果2.png" />
							<img src="img/苹果2.png" />
							<img src="img/苹果2.png" />
						</div>
					</th>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		var moveid = 0;
		var addpg = 0;
		var c=65;
		var pgs2 = document.querySelectorAll(".top div");
		var delectsetint = function() {
			clearInterval(moveid);
			clearInterval(addpg);
		}
		document.getElementById("btbegin").addEventListener('click', function() {
			delectsetint();
			for(var i=0;i<pgs2.length;i++){
				pgs2[i].style.display= "block";
			}
			moveid = setInterval(function() {
				var pgs = document.querySelectorAll(".top div");
				for(var i = 0; i < pgs.length; i++) {
					if (parseInt(pgs[i].style.top)>=380) {
						pgs[i].style.background="url(img/破裂苹果.png) -37px -2px";
						pgs[i].innerHTML="";
					}
					if(parseInt(pgs[i].style.top)>=386){
						pgs[i].remove();
					}
					console.log(parseInt(pgs[i].style.sudu));
					var l = parseInt(pgs[i].style.top) + pgs[i].style.sudu;
					pgs[i].style.top = l + "px";
				}
			}, 33);
			addpg = setInterval(function() {
				var pg1 = document.createElement("div");
				pg1.style.left = parseInt(Math.random() * 730 + 3) + "px";
				pg1.style.top = "0px";
//				pg1.className="pg01";
				pg1.innerHTML = "&#"+(parseInt(Math.random()*26)+c)+";";
				document.querySelector(".top").appendChild(pg1);
				pg1.style.sudu=parseInt(Math.random() * 2 + 1);
			}, 2000);
		})
		document.querySelector(".btzanting").addEventListener('click', function() {
			delectsetint();
		})
	</script>
</html>